import React, { useEffect, useState } from 'react'
import { Button, Card, Descriptions } from 'antd'
import { useNavigate, useParams  , Location, useLocation} from 'react-router-dom'

import type {
  getHosListDetialReqType,
  hospitalListItemsType,
  hospitalListBookRuleType
} from "@api/hospital/model/hospitalListTypes"

import { getHosListDetialRequest } from "@api/hospital/hospitalList"


//为了让useLocation可以使用state,我们需要封装一个自定义Hook
//自定义Hook可以接受一个泛型,这个泛型就是state属性值的类型
function useMyLocation <T> () {
  type L = Location & {state: T}
  return useLocation() as L
}



export default function HospitalShow() {

  //使用自定义Hook拿到路由传值中state的值
  const location = useMyLocation <{a: number}> ()
  const {a} = location.state
  
  //useParams接收id
  const { id } = useParams()

  //useNavigate路由跳转
  const navigate = useNavigate()

  //保存医院列表详情  
  //bookingRule 和 hospital 必须是可选才能定义detial为getHosListDetialReqType类型的空对象
  const [detial, setDetial] = useState<getHosListDetialReqType>({})



  //刚进页面请求医院详情渲染页面
  useEffect(() => {
    (async () => {
      //id有可能是undefined 类型断言id是string发送请求
      const result = await getHosListDetialRequest(id as string);

      //把医院列表详情数据保存到状态
      setDetial(result)
    })()
  }, [])


  //1.点击返回的回调函数
  const goBackHandle = () => {
    //回到医院列表
    navigate(-1)
  }


  return (
    <div>
      <Card>
        {/* 
            因为detial.hospital是可选属性可能是undefined  不能从undefined上读取属性  
            所以用类型断言 确保detial.hospital是hospitalListItemsType类型
            读取这个属性是同步的 所以要是可选 等待请求数据回来之后 才能读取属性
        */}
        <Descriptions title="基本信息" bordered column={2}>

          <Descriptions.Item label="医院名称" style={{textAlign: 'center'}}>
            {(detial.hospital as hospitalListItemsType)?.hosname}
          </Descriptions.Item>

          <Descriptions.Item label="医院logo" style={{textAlign: 'center'}}>
            {
              (detial.hospital as hospitalListItemsType)?.logoData ? //如果有图片才渲染
                (
                  <img width={160}  alt=""
                    src={`data:image/jpeg;base64,${(detial.hospital as hospitalListItemsType)?.logoData }`}
                  />
                ) : ""
            }
          </Descriptions.Item>

          <Descriptions.Item label="医院编码" style={{textAlign: 'center'}}>
            {(detial.hospital as hospitalListItemsType)?.hoscode}
          </Descriptions.Item>

          <Descriptions.Item label="医院地址" style={{textAlign: 'center'}}>
            {(detial.hospital as hospitalListItemsType)?.param?.fullAddress}
          </Descriptions.Item>

          <Descriptions.Item label="坐车路线" span={2}>
            {(detial.hospital as hospitalListItemsType)?.route}
          </Descriptions.Item>

          <Descriptions.Item label="医院简介" span={2}>
            {(detial.hospital as hospitalListItemsType)?.intro}
          </Descriptions.Item>
        </Descriptions>


        {/* 
            因为detial.bookingRule是可选属性可能是undefined  不能从undefined上读取属性  
            所以用类型断言 确保detial.bookingRule是hospitalListBookRuleType类型
            读取这个属性是同步的 所以要是可选 等待请求数据回来之后 才能读取属性
        */}
        <Descriptions title="预约规则信息" bordered column={2} style={{ marginTop: 30 }}>

          <Descriptions.Item label="预约周期" style={{textAlign: 'center'}}>
            {(detial.bookingRule as hospitalListBookRuleType)?.cycle}
          </Descriptions.Item>

          <Descriptions.Item label="放号时间" style={{textAlign: 'center'}}>
           {(detial.bookingRule as hospitalListBookRuleType)?.releaseTime}
          </Descriptions.Item>

          <Descriptions.Item label="停挂时间" style={{textAlign: 'center'}}>
            {(detial.bookingRule as hospitalListBookRuleType)?.stopTime}
          </Descriptions.Item>

          <Descriptions.Item label="退号时间" style={{textAlign: 'center'}}>
           {(detial.bookingRule as hospitalListBookRuleType)?.quitTime}
          </Descriptions.Item>

          <Descriptions.Item label="预约规则" span={2} style={{textAlign: 'center'}}>
            {(detial.bookingRule as hospitalListBookRuleType)?.rule.map((item, index) => {
              return <p key={index}>{item}</p>;
            })}
          </Descriptions.Item>

        </Descriptions>


        <Button style={{ marginTop: 30 }} onClick={goBackHandle}>返回</Button>

      </Card>
    </div>
  )
}
